<template>
    <div class="help-center">
        <div class="bg">
            <div class="left">
                <span class="bold">在线客服</span>
                <span class="bold">即时为您解答</span>
            </div>
            <img class="right" src="@/assets/service/answer01.png">
        </div>
        <div class="select-type-card">
            <div class="head flex">
                <span class="bold">请选择类型</span>
                <div class="warning">
                    <img src="@/assets/service/answer05.png">
                    <span class="f14">须知</span>
                </div>
            </div>
            <div class="list">
                <div class="item flex" v-for="(item) in list" :key="item.id" @click="goAnsweringDoubts(item.id)">
                    <div class="left">
                        <span class="spot"></span>
                        <span class="f14">{{ item.article_title }}</span>
                    </div>
                    <img class="right" src="@/assets/images/more.png">
                </div>
            </div>
        </div>
        <HelpButton :index="0"></HelpButton>
        <loading v-if="!list.length"></loading>
    </div>
</template>
<script>
import { listData } from "@/common/serviceList"
import HelpButton from '@/components/Service/HelpButton.vue';
export default {
    name: "HelpCenter",
    components: {
        HelpButton
    },
    data() {
        return {
            dataLength: 0,
            lack: 0,
            list: [],
        }
    },
    created() {
        this.getList()
    },
    methods: {
        goAnsweringDoubts(id) {
            this.$router.push({ name: "doubts", query: { id } })
        },
        sendListAjax(type) {
            this.$sendGet("Help/getCommonProblemType", { type })
                .then(res => {
                    if (res.data.status === 200) {
                        const { data } = res.data
                        this.list.push(...data)
                    }
                })

        },
        getList() {
            let { type } = this.$route.query;
            !!type ? null : type = 10;
            const item = listData.find(item => item.type == type);
            document.title += item.title;
            this.sendListAjax(type);
        },
    }
}
</script>
<style lang="scss" scoped>
.help-center {
    height: 100vh;
    background-color: #f7f7f7;

    .bg {
        height: 180px;
        border-bottom-left-radius: 25px;
        border-bottom-right-radius: 25px;
        background-image: linear-gradient(to right, #f7706d, #fe7d63);
        display: flex;
        padding: 30px;
        justify-content: flex-end;

        .left {
            display: flex;
            flex-direction: column;
            justify-content: center;

            span {
                color: white;

                &:nth-of-type(1) {
                    margin-bottom: 10px;
                }
            }
        }

        .right {
            width: 200px;
            object-fit: contain;
        }
    }

    .select-type-card {
        border-radius: 10px;
        padding: 10px;
        background-color: white;
        width: 345px;
        margin: -20px auto 15px;

        .head {
            padding-bottom: 10px;
            border-bottom: 1px solid #f9f9f9;

            .warning {
                display: flex;
                align-items: center;

                img {
                    width: 20px;
                    margin-right: 5px;
                    object-fit: contain;
                }
            }
        }

        .list {

            .item {
                padding: 12px 0;
                border-bottom: 1px solid #f9f9f9;

                .left {
                    display: flex;
                    align-items: center;

                    .spot {
                        width: 5px;
                        height: 5px;
                        border-radius: 50%;
                        background-color: #f6706d;
                        margin-right: 5px;
                    }
                }

                .right {
                    width: 5px;
                    object-fit: contain;
                }
            }
        }
    }
}
</style>